<template>
  <div id="home">
    <div class="containner flex item-start justify-between">
      <!-- 分类 -->
      <div class="category-bar py-10 bg-white text-sm dark box-shadow">
        <div class="category" v-for="one_cate in category_list" :key="one_cate.cate_id"
          @mouseover="cate_over(one_cate.cate_id)" @mouseout="cate_over(-1)">
          <div class="category-1 hover-bg-gray hover-red px-20 py-5 hand">{{one_cate.cate_name}}</div>
          <div class="category-group box-shadow px-10 py-10"
            :class="{'active':current_category_id == one_cate.cate_id}">
            <!-- 二级分类 -->
            <div class="my-10 flex item-start" v-for="tow_cate in one_cate.children" :key="tow_cate.cate_id">
              <!-- 二级分类名称 -->
              <div class="category-2 black hand hover-red flex justify-end">
                <div class="bold">{{tow_cate.cate_name}}</div>
                <div class="ml-10 weight">&gt;</div>
              </div>
              <!-- 三级分类 -->
              <div class="flex item-center wrap category_small_group">
                <div v-for="three_cate in tow_cate.children" :key="three_cate.cate_id"
                  class="category-3 dark hand hover-red ml-10" @click="three_cate_clicked(three_cate)">
                  {{three_cate.cate_name}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="carousel-bar hand">
        <div class="carousel-imgs"><img :src="require('@/assets/img/carousel01.jpg')" width="790px" height="490px"
            class="carousel-img">
        </div>
        <div class="carousel-controls flex item-center">
          <div class="carousel-control mx-5 active"></div>
          <div class="carousel-control mx-5"></div>
          <div class="carousel-control mx-5"></div>
          <div class="carousel-control mx-5"></div>
          <div class="carousel-control mx-5"></div>
        </div>
      </div>
      <!-- 推荐商品 -->
      <div class="recommend-bar flex-column justify-between item-center"><img
          :src="require('@/assets/img/carousel-right01.jpg')" width="190px"><img
          :src="require('@/assets/img/carousel-right02.jpg')" width="190px"><img
          :src="require('@/assets/img/carousel-right03.jpg')" width="190px"></div>
    </div>
    <div class="containner mt-20" v-for="recommend in home_recommend_spu_list" :key="recommend.category.cate_id">
      <div class="recommend-category px-20 py-10 my-10 gray text-xl bold"> {{recommend.category.cate_name}} 专场 </div>
      <div class="flex wrap item-start">
        <spu v-for="spu in  recommend.spuList" :key="spu.spu_id" :spu="spu" @click.native="spu_clicked(spu)"></spu>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState,
    mapMutations
  } from 'vuex'

  import Spu from '../components/Spu.vue'

  export default {
    name: 'HomeView',
    components: {
      'spu': Spu
    },
    computed: {
      ...mapState('product', ['home_recommend_spu_list']),
      ...mapState('category', ['category_list', 'current_category_id'])
    },
    methods: {
      ...mapActions('product', ['get_home_recommend_spu_list']),
      ...mapActions('category', ['get_category_list']),
      ...mapMutations('product', ['set_spu', 'set_spulist_filter_cate']),
      ...mapMutations('category', ['set_current_category_id']),
      //点击商品
      spu_clicked(spu) {
        //保存当前点击的商品
        this.set_spu(spu);
        //跳转商品详情页
        this.$router.push({
          path: '/spuDetail'
        })
      },
      //分类的鼠标事件处理函数
      cate_over(cate_id) {
        this.set_current_category_id(cate_id)
      },
      //点击三级分类
      three_cate_clicked(cate) {
        //保存点击的分类数据
        this.set_spulist_filter_cate(cate);
        //跳转商品列表页面
        this.$router.push({
          path: '/spulist'
        })
      }
    },
    mounted() {
      //获取分类下的商品spu列表
      this.get_home_recommend_spu_list();
      //获取分类数据
      this.get_category_list();
    }
  }
</script>
<style scoped>
  @import '../assets/css/home.css'
</style>
